<template>
	<view class="content">
		<a-demo title="基础使用">
			<pure-input v-model="name" placeholder="请填写您的姓名"></pure-input>
		</a-demo>

		<a-demo title="数字类型">
			<pure-input type="number" v-model="age" placeholder="请填写您的年龄"></pure-input>
			<a-gap></a-gap>
			<pure-input type="number" v-model="price" placeholder="请填写您的报价"></pure-input>
		</a-demo>

		<a-demo title="禁用">
			<pure-input type="number" v-model="age" placeholder="请填写您的年龄" disabled></pure-input>
		</a-demo>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 基础使用
const name = ref('');

// 数字类型
const age = ref(18);
const price = ref(180.5);
</script>

<style scoped>
.content {
	--pure-input-height: 2.5em;
	--pure-input-background: var(--pure-background-element);
	--pure-input-border-radius: 5px;
	--pure-input-padding: 0 0.5em;
}
</style>
